/*
 * @Author: Zhengxuan Ye
 * @Date: 2025-05-06 21:27:26
 * @Last Modified by:   Zhengxuan Ye
 * @Last Modified time: 2025-05-06 21:27:26
 */

<template>
  <div class="heritage-list">
    <div class="container">
      <div class="page-header">
        <h1>中国非物质文化遗产名录</h1>
        <p>
          截至2023年，我国共有1372个国家级非物质文化遗产代表性项目，40个项目入选联合国教科文组织非物质文化遗产名录
        </p>
      </div>

      <!-- 筛选和搜索区域 -->
      <div class="filter-section">
        <div class="search-box">
          <input
            type="text"
            v-model="searchQuery"
            placeholder="搜索非遗项目名称..."
            @input="handleSearch"
          />
          <button class="search-btn">搜索</button>
        </div>

        <div class="filters">
          <div class="filter-group">
            <label>分类:</label>
            <select v-model="selectedCategory" @change="handleFilter">
              <option value="">全部分类</option>
              <option v-for="category in categories" :key="category.id" :value="category.id">
                {{ category.name }}
              </option>
            </select>
          </div>

          <div class="filter-group">
            <label>地区:</label>
            <select v-model="selectedRegion" @change="handleFilter">
              <option value="">全部地区</option>
              <option v-for="region in regions" :key="region.id" :value="region.id">
                {{ region.name }}
              </option>
            </select>
          </div>

          <div class="filter-group">
            <label>级别:</label>
            <select v-model="selectedLevel" @change="handleFilter">
              <option value="">全部级别</option>
              <option value="national">国家级</option>
              <option value="provincial">省级</option>
              <option value="unesco">联合国教科文组织名录</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 遗产列表 -->
      <div v-if="loading" class="loading">正在加载...</div>

      <div v-else-if="filteredHeritages.length === 0" class="no-results">
        <p>没有找到符合条件的非遗项目</p>
        <button @click="resetFilters" class="btn btn-outline">重置筛选条件</button>
      </div>

      <div v-else class="heritage-grid">
        <div
          v-for="heritage in filteredHeritages"
          :key="heritage.id"
          class="heritage-card"
          @click="viewDetails(heritage.id)"
        >
          <div class="heritage-image">
            <img :src="heritage.image" :alt="heritage.name" />
            <div class="image-source">素材来源于中国非物质文化遗产网</div>
          </div>
          <div class="heritage-content">
            <h3>{{ heritage.name }}</h3>
            <div class="heritage-meta">
              <span class="heritage-location">{{ heritage.location }}</span>
              <span :class="['heritage-level', `level-${heritage.level}`]">{{
                getLevelText(heritage.level)
              }}</span>
            </div>
            <p class="heritage-desc">{{ truncateText(heritage.description, 100) }}</p>
          </div>
        </div>
      </div>

      <!-- 分页控件 -->
      <div class="pagination">
        <button :disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="page-btn">
          上一页
        </button>

        <span v-for="page in totalPages" :key="page">
          <button
            :class="['page-number', { active: currentPage === page }]"
            @click="changePage(page)"
          >
            {{ page }}
          </button>
        </span>

        <button
          :disabled="currentPage === totalPages"
          @click="changePage(currentPage + 1)"
          class="page-btn"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import display1 from '../assets/display/pic1.jpg'
import display2 from '../assets/display/pic2.jpg'
import display3 from '../assets/display/pic3.jpg'
import display4 from '../assets/display/pic4.jpg'
import display5 from '../assets/display/pic5.JPG'
import display6 from '../assets/display/pic6.jpg'
import display7 from '../assets/display/pic7.jpg'
import display8 from '../assets/display/pic8.jpg'
import display9 from '../assets/display/pic9.jpeg'
import display10 from '../assets/display/pic10.jpg'
import display11 from '../assets/display/pic11.jpg'
import display12 from '../assets/display/pic12.jpg'

export default {
  name: 'HeritageListView',
  setup() {
    const router = useRouter()
    const route = useRoute()

    // 状态变量
    const heritages = ref([])
    const loading = ref(true)
    const searchQuery = ref('')
    const selectedCategory = ref('')
    const selectedRegion = ref('')
    const selectedLevel = ref('')
    const currentPage = ref(1)
    const itemsPerPage = 8 // 每页显示的项目数量

    // 从路由参数中获取分类
    onMounted(() => {
      if (route.query.category) {
        selectedCategory.value = parseInt(route.query.category)
      }

      // 加载数据
      loadHeritages()
    })

    // 监听筛选条件变化，更新URL
    watch([selectedCategory, selectedRegion, selectedLevel], () => {
      updateUrlParams()
    })

    // 更新URL参数
    const updateUrlParams = () => {
      const query = {}
      if (selectedCategory.value) query.category = selectedCategory.value
      if (selectedRegion.value) query.region = selectedRegion.value
      if (selectedLevel.value) query.level = selectedLevel.value
      if (searchQuery.value) query.search = searchQuery.value

      router.push({ query })
    }

    // 加载遗产数据
    const loadHeritages = () => {
      loading.value = true

      // 模拟API请求延迟
      setTimeout(() => {
        // 这里应该是实际的API调用
        heritages.value = generateHeritageData()
        loading.value = false
      }, 600)
    }

    // 处理搜索
    const handleSearch = () => {
      currentPage.value = 1
      updateUrlParams()
    }

    // 处理筛选
    const handleFilter = () => {
      currentPage.value = 1
      updateUrlParams()
    }

    // 重置筛选条件
    const resetFilters = () => {
      searchQuery.value = ''
      selectedCategory.value = ''
      selectedRegion.value = ''
      selectedLevel.value = ''
      currentPage.value = 1
      updateUrlParams()
    }

    // 查看详情
    const viewDetails = (id) => {
      // 对于四个精选非遗项目，跳转到专用页面
      switch (id) {
        case 101:
          router.push('/featured/jing-tai-lan')
          break
        case 102:
          router.push('/featured/su-zhou-embroidery')
          break
        case 103:
          router.push('/featured/peking-opera')
          break
        case 104:
          router.push('/featured/huang-mei-opera')
          break
        default:
          router.push(`/heritage/${id}`)
      }
    }

    // 切换页面
    const changePage = (page) => {
      currentPage.value = page
      window.scrollTo(0, 0)
    }

    // 截断文本，显示指定长度
    const truncateText = (text, length) => {
      if (text.length <= length) return text
      return text.substring(0, length) + '...'
    }

    // 获取级别文本
    const getLevelText = (level) => {
      switch (level) {
        case 'national':
          return '国家级'
        case 'provincial':
          return '省级'
        case 'unesco':
          return '联合国教科文组织名录'
        default:
          return ''
      }
    }

    // 筛选后的遗产列表
    const filteredHeritages = computed(() => {
      let result = heritages.value

      // 按搜索关键词筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter((item) => {
          return (
            item.name.toLowerCase().includes(query) ||
            item.description.toLowerCase().includes(query)
          )
        })
      }

      // 按分类筛选
      if (selectedCategory.value) {
        result = result.filter((item) => item.categoryId === selectedCategory.value)
      }

      // 按地区筛选
      if (selectedRegion.value) {
        result = result.filter((item) => item.regionId === selectedRegion.value)
      }

      // 按级别筛选
      if (selectedLevel.value) {
        result = result.filter((item) => item.level === selectedLevel.value)
      }

      return result
    })

    // 分页后的遗产列表
    const paginatedHeritages = computed(() => {
      const start = (currentPage.value - 1) * itemsPerPage
      const end = start + itemsPerPage
      return filteredHeritages.value.slice(start, end)
    })

    // 总页数
    const totalPages = computed(() => {
      return Math.ceil(filteredHeritages.value.length / itemsPerPage)
    })

    // 分类数据
    const categories = [
      { id: 1, name: '传统技艺' },
      { id: 2, name: '传统音乐' },
      { id: 3, name: '传统舞蹈' },
      { id: 4, name: '传统戏剧' },
      { id: 5, name: '传统美术' },
      { id: 6, name: '传统医药' },
      { id: 7, name: '民俗' },
      { id: 8, name: '传统体育、游艺与杂技' },
    ]

    // 地区数据
    const regions = [
      { id: 1, name: '北京' },
      { id: 2, name: '上海' },
      { id: 3, name: '江苏' },
      { id: 4, name: '浙江' },
      { id: 5, name: '安徽' },
      { id: 6, name: '福建' },
      { id: 7, name: '广东' },
      { id: 8, name: '四川' },
      { id: 9, name: '贵州' },
      { id: 10, name: '云南' },
      { id: 11, name: '西藏' },
      { id: 12, name: '陕西' },
    ]

    // 生成模拟数据
    const generateHeritageData = () => {
      // 这里应该是从API获取的真实数据
      return [
        {
          id: 101,
          name: '景泰蓝制作技艺',
          categoryId: 1,
          regionId: 1,
          location: '北京',
          level: 'national',
          description:
            '景泰蓝是中国传统的金属工艺品，以铜胎掐丝，填充色釉，经过烧制形成的工艺品，具有悠久的历史，被誉为"中华国粹"，是中国工艺美术的瑰宝。',
          image: display1, // pic1 - 景泰蓝
        },
        {
          id: 102,
          name: '苏州刺绣',
          categoryId: 1,
          regionId: 3,
          location: '江苏苏州',
          level: 'unesco',
          description:
            '苏绣是中国四大名绣之一，以其精细的针法、色彩典雅、图案秀丽闻名于世，具有"平、细、和、密、顺、光"的特点。',
          image: display2, // pic2 - 苏州刺绣
        },
        {
          id: 103,
          name: '京剧',
          categoryId: 4,
          regionId: 1,
          location: '北京',
          level: 'unesco',
          description:
            '京剧是中国国粹，融合了唱、念、做、打等艺术表现形式，具有丰富的文化内涵和艺术魅力，是中国戏曲的代表。',
          image: display3, // pic3 - 京剧
        },
        {
          id: 104,
          name: '黄梅戏',
          categoryId: 4,
          regionId: 5,
          location: '安徽',
          level: 'national',
          description:
            '黄梅戏是中国五大戏曲剧种之一，以通俗易懂、贴近生活的表演风格深受观众喜爱，有"东方歌剧"的美誉。',
          image: display4, // pic4 - 黄梅戏
        },
        {
          id: 105,
          name: '福建土楼',
          categoryId: 7,
          regionId: 6,
          location: '福建',
          level: 'unesco',
          description:
            '福建土楼是中国独特的民居建筑，多为圆形或方形，具有防御、防震等功能，体现了中国古代建筑智慧。',
          image: display5, // pic5 - 福建土楼
        },
        {
          id: 106,
          name: '广绣',
          categoryId: 1,
          regionId: 7,
          location: '广东',
          level: 'national',
          description:
            '广绣是中国四大名绣之一，以精细的针法和鲜明的色彩著称，具有"平、光、细、密"的特点。',
          image: display6, // pic6 - 广绣
        },
        {
          id: 107,
          name: '昆曲',
          categoryId: 4,
          regionId: 3,
          location: '江苏苏州',
          level: 'unesco',
          description:
            '昆曲是中国最古老的戏曲剧种之一，被誉为"百戏之祖"，有着六百多年的历史，是中国传统文化的重要组成部分。',
          image: display7, // pic7 - 昆曲
        },
        {
          id: 108,
          name: '蜀锦织造技艺',
          categoryId: 1,
          regionId: 8,
          location: '四川成都',
          level: 'national',
          description:
            '蜀锦是中国四大名锦之一，织造工艺精湛，图案华丽，历史悠久，是中国传统丝织工艺的杰出代表。',
          image: display8, // pic8 - 蜀锦
        },
        {
          id: 109,
          name: '贵州苗绣',
          categoryId: 1,
          regionId: 9,
          location: '贵州',
          level: 'national',
          description:
            '苗绣是贵州苗族的传统手工艺，色彩鲜艳，图案丰富，具有浓郁的民族特色，是中国少数民族文化的瑰宝。',
          image: display9, // pic9 - 贵州苗绣
        },
        {
          id: 110,
          name: '云南傣族水泼节',
          categoryId: 7,
          regionId: 10,
          location: '云南西双版纳',
          level: 'national',
          description:
            '水泼节是傣族的传统节日，每年傣历新年期间举行，人们互相泼水，寓意洗去过去一年的不顺，迎接新年的到来。',
          image: display10, // pic10 - 傣族泼水节
        },
        {
          id: 111,
          name: '藏医药浴法',
          categoryId: 6,
          regionId: 11,
          location: '西藏',
          level: 'unesco',
          description:
            '藏医药浴法是藏族传统医学的重要组成部分，通过药物浸浴治疗疾病，具有独特的医疗价值和文化内涵。',
          image: display11, // pic11 - 藏医药浴
        },
        {
          id: 112,
          name: '陕西皮影戏',
          categoryId: 4,
          regionId: 12,
          location: '陕西',
          level: 'national',
          description:
            '陕西皮影戏是中国重要的民间艺术形式，通过操纵皮制人物剪影在白幕上表演故事，具有浓厚的地方特色。',
          image: display12, // pic12 - 皮影戏
        },
      ]
    }

    return {
      heritages,
      loading,
      searchQuery,
      selectedCategory,
      selectedRegion,
      selectedLevel,
      currentPage,
      categories,
      regions,
      filteredHeritages: paginatedHeritages,
      totalPages,
      handleSearch,
      handleFilter,
      resetFilters,
      viewDetails,
      changePage,
      truncateText,
      getLevelText,
    }
  },
}
</script>

<style scoped>
.heritage-list {
  padding: 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.page-header p {
  color: #666;
  max-width: 800px;
  margin: 0 auto;
}

/* 筛选和搜索区域 */
.filter-section {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 30px;
}

.search-box {
  display: flex;
  margin-bottom: 20px;
}

.search-box input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-size: 1rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.search-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer;
  transition: var(--transition);
}

.search-btn:hover {
  background-color: #b42c2c;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  font-weight: bold;
}

.filter-group select {
  padding: 8px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: white;
  min-width: 150px;
}

/* 遗产列表 */
.heritage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.heritage-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
}

.heritage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.heritage-image {
  height: 280px;
  position: relative;
  overflow: hidden;
}

.heritage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.heritage-card:hover .heritage-image img {
  transform: scale(1.05);
}

.heritage-image .image-source {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 2;
}

.heritage-content {
  padding: 20px;
}

.heritage-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.heritage-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.heritage-location {
  color: #666;
  font-size: 0.9rem;
}

.heritage-level {
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.level-national {
  background-color: #f0f8ff;
  color: #1e90ff;
}

.level-provincial {
  background-color: #f0fff0;
  color: #2e8b57;
}

.level-unesco {
  background-color: #fff0f5;
  color: #c71585;
}

.heritage-desc {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 加载和无结果提示 */
.loading,
.no-results {
  text-align: center;
  padding: 50px 0;
  color: #666;
}

.no-results p {
  margin-bottom: 20px;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 8px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: white;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.page-btn,
.page-number {
  padding: 8px 15px;
  border: 1px solid var(--border-color);
  background-color: white;
  color: var(--dark-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-number {
  min-width: 40px;
}

.page-number.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-btn:not(:disabled):hover,
.page-number:not(.active):hover {
  border-color: var(--primary-color);
}

/* 响应式调整 */
@media (max-width: 992px) {
  .heritage-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }

  .heritage-image {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    gap: 15px;
  }

  .filter-group {
    width: 100%;
  }

  .filter-group select {
    flex: 1;
  }

  .heritage-grid {
    grid-template-columns: 1fr;
  }

  .heritage-image {
    height: 220px;
  }
}
</style>
